<template>
  <view class="container">
    <view class="top">
      <view class="top_left">
        <view class="top_title">时间:</view>
        <picker :range="timeArr" :value="timeIndex" @change="bindTime" mode="selector" >
          <view class="uni-input">{{ timeValue || '请选择时间' }}</view>
        </picker>
      </view>
      <view class="top_right">
        <view class="top_title">剖面:</view>
        <picker :range="profileArr" :value="profileIndex" @change="bindProfile" mode="selector" >
          <view class="uni-input">{{ profileValue || '请选择剖面' }}</view>
        </picker>
      </view>
    </view>
    <view class="mid">
      <view class="mid_left">
        <view class="mid_box">
          <view class="mid_title">天气:</view>
          <view class="mid_info">{{ weather }}</view>
        </view>
        <view class="mid_box">
          <view class="mid_title">水位差:</view>
          <view class="mid_info">{{ difference }}m</view>
        </view>
      </view>
      <view class="mid_right">
        <button @click="seach" class="mini-btn btnclass" type="default" size="mini">查询</button>
				<button @click="reset" class="mini-btn" type="default" size="mini">重置</button>
      </view>
    </view>
    <view class="bot">
      <view class="bot_title">
        <view>剖面</view>
        <view>序号</view>
        <view>测压管水位</view>
        <view>水位高差</view>
      </view>
      <view class="bot_box">
        <view v-for="(item, index) in list" :key="index" class="bot_list">
          <view style="color: #57a1fb">{{ item.dmCode }}</view>
          <view>{{ item.jcCode }}</view>
          <view>{{ item.cygsw }}</view>
          <view>{{ item.swgc }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        damArr: [],
        damIndex: 0,
        damvalue: '',
        timeArr: [],
        timeIndex: 0,
        timeValue: '请选择时间',
        profileArr: [],
        profileIndex: 0,
        profileValue: '请选择剖面',
        weather: '',
        weatherMap: [
          { number: 5, name: "雪" },
          { number: 6, name: "雨夹雪" },
          { number: 7, name: "雨" },
          { number: 8, name: "阴" },
          { number: 9, name: "晴" },
        ],
        difference: '',
        list: [],
        remark: '',
      }
    },
    onLoad(options) {
      if(options) {
        this.remark = options.remark
        this.getDam(options.remark)
      }
    },
    methods: {
      // 渗压监测
      getDam(e) {
        if(this.timeValue == '请选择时间') {
          this.timeValue = ''
        }
        if(this.profileValue == '请选择剖面') {
          this.profileValue = ''
        }
        this.$request.selectDamInfo({ remark: e, dmCode: this.profileValue, jcTime: this.timeValue }).then(res => {
          this.timeArr = res.data.time || []
          this.profileArr = res.data.damCode || []
          this.weather = this.weatherMap.find(item => item.number == res.data.list[0].jcWeather)?.name || '未知'
          this.difference = res.data.list[0].cygsw
          this.list = res.data.list
        })
      },
      // 选择时间
      bindTime(e) {
        this.timeValue = this.timeArr[e.target.value]
      },
      // 选择剖面
      bindProfile(e) {
        this.profileValue = this.profileArr[e.target.value]
      },
      // 搜索
      seach() {
        this.getDam(this.remark)
      },
      // 重置
      reset() {
        this.timeValue = '请选择时间'
        this.profileValue = '请选择剖面'
        setTimeout(() => {
          this.getDam(this.remark)
        }, 0);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 25rpx 0;

    .top_left, .top_right {
      display: flex;
      align-items: center;

      .top_title {
        font-size: 32rpx;
        line-height: 32rpx;
        margin-right: 20rpx;
      }

      uni-picker {
        width: 300rpx;
        height: 60rpx;
        background-color: #fff;
        border-radius: 10rpx;

        .uni-input {
          font-size: 28rpx;
          line-height: 60rpx;
          // padding-left: 10rpx;
          color: #969696;
          width: 100%;
          text-align: center;
        }
      }
    }

    .top_right {
      uni-picker {
        width: 170rpx;
      }
    }
  }

  .mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 25rpx 0;

    .mid_left {
      display: flex;
      align-items: center;

      .mid_box {
        display: flex;
        align-items: center;

        &:nth-child(1) {
          margin-right: 20rpx;
        }


        .mid_title {
          font-size: 32rpx;
          line-height: 32rpx;
          margin-right: 20rpx;
        }

        .mid_info {
          font-size: 28rpx;
          color: #969696;
        }
      }
    }

    .mid_right {
      uni-button {
        margin-left: 10rpx;

        &.btnclass {
          background-color: #458EFB;
          color: #fff;
        }
      }
    }
  }

  .bot {
    margin-top: 25rpx;

    .bot_title {
      display: flex;
      align-items: center;
      padding: 20rpx 25rpx;

      view {
        flex: 1;
        font-size: 32rpx;
        line-height: 32rpx;
        color: #458EFB;
        text-align: center;
      }
    }

    .bot_box {

      .bot_list {
        font-size: 30rpx;
        line-height: 30rpx;
        background-color: #fff;
        border-bottom: 1px solid #e9e7e7;
        padding: 20rpx 25rpx;
        display: flex;
        align-items: center;

        view {
          flex: 1;
          text-align: center;
        }
      }
    }
  }
</style>
